@import (reference) "~weaver-mobile/dist/weaver-mobile.less";

@TableListPrefixCls: table-list;
@emailSettingPrefixCls: email-setting;
@emailLabelManagePrefixCls: label-manage;
@emailFolderManagePrefixCls: folder-manage;
@emailMailSignPrefixCls: mail-sign;
@emailMailTemplatePrefixCls: mail-template;

@emailTitleHeight: 28 * @hd;

/* TableList */
.@{TableListPrefixCls} {
  &-warpper {
    height: 100%;
    .@{TableListPrefixCls}-mask {
      padding: @v-spacing-lg;
      text-align: center;
      background: @fill-base;
      .am-icon {
        width: @icon-size-lg;
        height: @icon-size-lg;
      }
    }
    .am-list {
      overflow-x: hidden;
      &-item {
        .am-list-line {
          border-bottom: none;
          flex-wrap: wrap;
          .am-list-content {
            width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: @h-spacing-sm;
            flex: 1 0 160 * @hd;
            padding-bottom: 0px;
          }
          .am-list-extra {
            flex-basis: auto;
          }
        }
      }
      &-footer > div {
        text-align: center;
      }
    }
    .am-icon {
      width: @icon-size-xxs;
      height: @icon-size-xxs;
      vertical-align: middle;
      margin-right: @h-spacing-sm;
    }
  }
  &-loading {
    .am-activity-indicator {
      justify-content: center;
    }
  }
  &-nomore {
    text-align: center;
    color: @color-text-caption;
    padding-top: 19.5 * @hd;
    font-size: @font-size-caption-sm;
    &-line-left {
      display: inline-block;
      width: 20 * @hd;
      height: 1 * @hd;
      vertical-align: middle;
      background: linear-gradient(to left, @color-icon-base, @fill-base);
    }
    &-line-name {
      padding: 0 10 * @hd;
      display: inline-block;
      vertical-align: middle;
    }
    &-line-right {
      display: inline-block;
      width: 20 * @hd;
      height: 1 * @hd;
      vertical-align: middle;
      background: linear-gradient(to right, @color-icon-base, @fill-base);
    }
  }
}

/* 设置页面头部标题 */
.email-title {
  height: @emailTitleHeight;
  line-height: @emailTitleHeight;
  text-align: center;
  color: @color-text-base-inverse;
  background: #717171;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: @h-spacing-md;
  padding-right: @h-spacing-md;
}

.route-layout-form {
  /* 按钮组 */
  .btn-group {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    line-height: @search-bar-height;

    .am-button {
      display: inline-block;
      flex: 1;
    }
    .hidden {
      display: none;
    }
  }
}

/* 添加按钮样式 */
.btn-add {
  border: none;
  border-bottom: @border-width-md solid @border-color-base;
  color: @brand-primary;
  .am-icon {
    width: @icon-size-xxs;
    height: @icon-size-xxs;
  }
}

/* email setting */
.email-setting-warpper {
  height: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  background: @fill-body;
}

/* AddMailAccount */
.add-mail-account {
  padding-top: @search-bar-height;
  padding-bottom: @search-bar-height;
  height: 100%;
  box-sizing: border-box;

  &-content {
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    .wm-form-item-wrap .needSave-tip {
      color: red;
      padding-left: 22 * @hd;
    }
  }

  &-header {
    text-align: center;
    padding-top: @v-spacing-md;
    padding-bottom: @v-spacing-md;

    &.result {
      width: 70%;
      margin: auto;
      border-bottom: @border-width-md solid @border-color-base;

      &.waitting {
        border-bottom: none;
        opacity: 0;
      }
      .add-mail-account-text {
        font-size: @font-size-caption-sm;
      }
    }
  }

  &-icon {
    width: 70 * @hd;
    height: 70 * @hd;
  }

  &-text {
    padding: @v-spacing-sm;
    color: @color-text-caption;
  }

  &-result {
    list-style: none;
    width: 70%;
    margin: auto;
    padding: @v-spacing-md @h-spacing-sm;
    box-sizing: border-box;

    &-item {
      margin-top: @v-spacing-lg;
      margin-bottom: @v-spacing-lg;
      display: flex;
      &.success {
        .am-icon {
          color: @brand-success;
        }
      }
      &.failed {
        .am-icon {
          color: @brand-error;
        }
      }
      .am-icon {
        flex: 0 0;
        flex-basis: auto;
        background: transparent;
        width: @font-size-caption;
        height: @font-size-caption;
        margin-right: @h-spacing-md;
        vertical-align: middle;
      }
      &-content {
        flex: 1 1;
      }
      &-err {
        a {
          color: @brand-primary-tap;
          text-decoration: underline;
          display: inline-block;
        }
      }
      &-msg {
        line-height: 1.5;
        color: @brand-error;
        display: inline-block;
        margin-right: @v-spacing-sm;
      }
    }
  }

  .am-steps {
    position: fixed;
    top: 0;
    padding-top: @v-spacing-md;

    .am-steps-item-icon {
      font-size: @font-size-icontext;
    }
    .am-steps-item-wait.am-steps-item-custom .am-steps-item-icon {
      width: @icon-size-md;
      height: @icon-size-md;
      border: @border-width-md solid @color-text-placeholder;
      color: @color-text-placeholder;
      & > .am-steps-icon {
        width: auto;
        height: auto;
        top: -@border-width-md;
        font-size: @font-size-icontext;
      }
    }
  }

  &-autogetfolder {
    color: @brand-primary;
  }

  &-getfolder {
    &-tip {
      background-color: @fill-grey;
      text-align: center;
      padding: 5 * @hd 0;
    }
    &-list {
      position: absolute;
      width: 100%;
      top: 0;
      bottom: @button-height;
      &-item {
        display: flex;
        &-label {
          flex: 1;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          padding-right: @h-spacing-md;
        }
        &-checkbox {
          flex: 0;
        }
      }
    }
  }
}

/* LabelManage */
.@{emailLabelManagePrefixCls} {
  background: @fill-body;
  &-span {
    max-width: 100%;
    padding: @h-spacing-sm;
    color: @color-text-base-inverse;
    border-radius: @radius-md;
    display: inline-block;
    box-sizing: border-box;
    line-height: 1;
  }
  .am-tag {
    color: @color-text-base-inverse;
    max-width: 100%;
    .am-tag-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

/* folder-manager */
.@{emailFolderManagePrefixCls} {
  position: relative;
  padding-top: 100 * @hd;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  background: @fill-body;
  padding-bottom: @search-bar-height;
  &-counts {
    display: flex;
    background: @fill-base;
    position: absolute;
    top: 0;
    width: 100%;
    &-item {
      flex: 1 1;
      padding: @v-spacing-lg;
      &-progress {
        &.zero {
          .am-progress-bar {
            display: none;
          }
        }
        margin-bottom: @v-spacing-md;
        .am-progress-outer {
          height: 10 * @hd;
          border-radius: 7.5 * @hd;
          .am-progress-bar {
            border-width: 5 * @hd;
            border-radius: 7.5 * @hd;
          }
        }
      }
      &-persent {
        margin-bottom: @v-spacing-md;
      }
      &-detail {
        font-size: @font-size-caption-sm;
        color: @color-text-caption;
      }
      &.mailSize {
        .@{emailFolderManagePrefixCls}-counts-item-progress {
          .am-progress-bar {
            border-color: @brand-warning;
          }
        }
        .@{emailFolderManagePrefixCls}-counts-item-persent {
          color: @brand-warning;
        }
      }
      &.mailSpace {
        .@{emailFolderManagePrefixCls}-counts-item-progress {
          .am-progress-bar {
            border-color: @brand-primary;
          }
        }
        .@{emailFolderManagePrefixCls}-counts-item-persent {
          color: @brand-primary;
        }
      }
    }
  }
  &-list-view {
    height: 100%;
    box-sizing: border-box;
    .wm-list-view-page-modal-scrollview-content {
      padding-bottom: @search-bar-height;
    }
  }
  &-list-item {
    &-name {
      display: flex;
      &-icon {
        flex-basis: auto;
        .am-icon {
          width: 18 * @hd;
          height: 18 * @hd;
          color: @color-text-caption;
          margin-right: @h-spacing-sm;
        }
      }
      > span {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        word-wrap: break-word;
        white-space: normal;
      }
    }
    &-size {
      color: @color-text-caption;
      padding: @v-spacing-sm 0 @v-spacing-md 18 * @hd + @h-spacing-sm;
      border-bottom: @border-width-md solid @border-color-base;
      > span {
        margin-right: @h-spacing-lg;
      }
    }
    &-action {
      text-align: right;
      padding: @v-spacing-md 0 @v-spacing-sm;
      span {
        display: inline-block;
        margin-left: @h-spacing-lg;
        .am-icon {
          width: 18 * @hd;
          height: 18 * @hd;
          vertical-align: middle;
          margin-right: @h-spacing-md;
          color: @color-text-caption;
        }
      }
    }
  }
  .btn-add {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: @border-width-md solid @border-color-base;
    border-bottom: none;
  }
}

/* MailTemplate, MailSign */
.@{emailMailTemplatePrefixCls},
.@{emailMailSignPrefixCls} {
  background: @fill-body;
  &-list-item {
    display: flex;
    &-body {
      flex: 1;
      width: calc(~"100% - " @icon-size-md);
      word-break: break-all;
      &-name {
        .default-sign {
          display: inline-block;
          border-radius: 2 * @hd;
          color: @color-text-base-inverse;
          background: @brand-primary;
          padding: 0 @h-spacing-sm;
          margin-left: @v-spacing-md;
          font-size: @font-size-caption-sm;
        }
      }
      &-type {
        color: @color-text-caption;
      }
    }
    &-arrow {
      flex-basis: auto;
      vertical-align: middle;
      line-height: 3;
      .am-icon {
        vertical-align: middle;
        color: @color-text-caption;
      }
    }
  }
  &-html {
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: @emailTitleHeight;
    box-sizing: border-box;
  }
  &-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}
